<template>
  <div class="channel-edit">
    <van-cell>
      <div class="channel_edit">
        <van-cell :border="false">
          <div slot="title"
               class="title_text">我的频道</div>
          <van-button type="danger"
                      class="edit_btn"
                      plain
                      round
                      size="mini"
                      @click="isEdit = !isEdit">
            {{isEdit ? '完成' : '编辑'}}
          </van-button>
        </van-cell>
      </div>
    </van-cell>
    <van-grid :gutter="10"
              class="my_grid">
      <van-grid-item v-for="(item, index) in myChannes"
                     :key="index"
                     @click="clickMyChannel(item, index)">
        <van-icon v-show="isEdit && !fiexChannels.includes(item.id)"
                  slot="icon"
                  name="clear"
                  class="close"
                  @click="deleteChannel(item)"></van-icon>
        <span slot="text"
              :class="{ active: index === current } "
              class="text">
          {{item.name}}
        </span>
      </van-grid-item>
    </van-grid>

    <van-cell :border="false">
      <div slot="title">频道推荐</div>
    </van-cell>

    <van-grid :gutter="10"
              class="recommend_grid">
      <van-grid-item v-for="(item, index) in recommendChannels"
                     :key="index"
                     icon="plus"
                     :text="item.name"
                     @click="addItem(item)">
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteUserChannel } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setToken } from '@/utils/storage.js'
export default {
  name: 'ChannelEdit',
  props: {
    myChannes: {
      type: Array,
      required: true
    },
    current: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false,
      fiexChannels: [0]
    }
  },
  created () { this.localAllChannels() },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      return this.allChannels.filter(channel => {
        return !this.myChannes.find(myChannel => {
          return myChannel.id === channel.id
        })
      })
    }
  },
  methods: {
    async localAllChannels () {
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    async addItem (item) {
      this.myChannes.push(item)
      if (this.user) {
        try {
          await addChannel({
            id: item.id,
            seq: this.myChannes.length
          })
        } catch (err) {
          console.log(err)
        }
      } else {
        setToken('TOUTIAO_CHANNELS', this.myChannes)
      }
    },
    clickMyChannel (item, id) {
      if (this.isEdit) {
        if (this.fiexChannels.includes(item.id)) {
          return
        }
        this.myChannes.splice(id, 1)
        if (id <= this.current) {
          this.$emit('current-click', this.curren - 1, true)
        }
        this.deleteChannel(item)
      } else {
        this.$emit('current-click', id, false)
      }
    },
    async deleteChannel (channel) {
      try {
        if (this.user) {
          await deleteUserChannel(channel.id)
        } else {
          setToken('TOUTIAO_CHANNELS', this.myChannes)
        }
      } catch (err) {
        this.$toast('操作失败！请稍后重试！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel_edit {
  margin-bottom: 30px;
  margin: 80px 0px 20px 0px;
  .van-cell {
    padding: 0;
  }
}
/deep/ .my_grid {
  .van-grid-item {
    position: relative;
    height: 90px;

    .van-grid-item__content {
      position: relative;
      background-color: #f3f5f7;
      .van-grid-item__icon-wrapper {
        /deep/ .van-icon {
          position: absolute;
          top: -43px;
          right: -95px;
          font-size: 30px;
          z-index: 2;
          &:hover {
            color: tomato;
          }
        }
      }
      .active {
        color: red;
      }
      span {
        font-size: 26px;
      }
    }
  }
}

/deep/.recommend_grid {
  margin-bottom: 30px;
  .van-grid-item {
    .van-grid-item__content {
      display: flex;
      flex-direction: row;
      background-color: #f3f5f7;
      .van-icon-plus {
        font-size: 28px;
      }
      .van-grid-item__text {
        display: inline-block;
        width: 95px;
        margin-top: 0px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
